<template>
    <div class="appContainer">
        <!--这里是 header -->
        <header id="header" class="mui-bar mui-bar-nav">
            <a v-if="showBack" @click="goBack" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">安师生活-爱安师爱生活</h1>
		</header>
        <!--这里是 内容区 -->
        <div class="mui-content">
            <!-- <transition mode="out-in"> -->
            
            <!-- keep-alive是Vue的内置组件，能在组件切换过程中保存组件的状态，缓存组件内容 -->
            <keep-alive include="newslist,imagelist">
             <router-view ></router-view>
            </keep-alive>
            <!-- </transition> -->
        </div>
        <!--这里是 footer-->
        <div class="footer">
            <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>

			<router-link class="mui-tab-item"  to="/classes">
				<span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
				<span class="mui-tab-label">分类</span>
			</router-link>

			<router-link class="mui-tab-item"  to="/find">
				<span class="mui-icon mui-icon-navigate"></span>
				<span class="mui-tab-label">发现</span>
			</router-link>

			<router-link class="mui-tab-item"  to="/cart">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">{{this.$store.getters.getTotalCount}}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>

            <router-link class="mui-tab-item" to="/user">
				<span class="mui-icon mui-icon-extra mui-icon-extra-peoples"></span>
				<span class="mui-tab-label">我的</span>
            </router-link>
		</nav>
        </div>
    </div>
</template>

<script>
export default {
        data(){
            return{
                showBack:false, //是否显示回退箭头
            }
        },
            methods:{
                goBack(){
                    // $route管理路由和传参的
                    // $router是管url的
                    this.$router.go(-1);
                }
            },
            created(){
                if(this.$route.path == '/home'){
                    this.showBack = false;
                }else{
                    this.showBack = true;
                }
            },
            watch:{
                // 监听路由,如果是/home，则不显示箭头，否则显示箭头
            '$route.path':function(newValue,oldValue){
                if(newValue == '/home'){
                    this.showBack = false;
                }else{
                    this.showBack = true;
                }
            }
           }
        
}
</script>

<style lang="less">
         
        .v-enter-active,.v-leave-active{
            transition:all 1s ease;
        }
        .appContainer{
                .mui-bar-nav{
                    background: #ce0000;
                    .mui-title{
                        color:#eee;
                        font-size:20px;
                        font-weight: bold;
                        font-family: "微软雅黑";
                        padding-bottom:50px;
                    }
                }

                .footer{
                    margin-top:50px;
                    .mui-bar-tab{
                        .mui-active{
                            color:#ce0000;
                        }
                    }
                }
        .v-enter{
            opacity: 0;
            transform: translateX(100%);
        }

   a{
       color:#eee;
   }
        }
</style>